<template>
  <div>
    <table border>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.sex }}</td>
        <td>
          <Btn type="success">编辑</Btn>
          <Btn type="error">删除</Btn>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
let list = ref([
  { name: "张三", age: 18, sex: "男" },
  { name: "李四", age: 19, sex: "女" },
  { name: "王五", age: 20, sex: "男" },
]);

interface IProps {
  type: "success" | "error";
}

// 函数式组件
const Btn = (props: IProps, ctx: any) => {
  /**
   * h函数:
   * 参数1：节点
   * 参数2：节点属性
   * 参数3：节点内容
   */
  return h(
    "button",
    {
      id: 1,
      class: "",
      style: {
        color: props.type === "success" ? "green" : "red",
      },
      onClick: () => {
        // ctx.emit("on-click", 123); // 通过 emit 派发事件

        if (props.type == "success") {
          alert("编辑");
        } else {
          alert("删除");
        }
      },
    },
    ctx.slots.default()
  );
};
</script>

<style scoped></style>
